<template>
    <a class="content">
        <div class="left" v-if="props.index">
            {{ index }}
        </div>
        <div class="middle">
            <img loading="lazy" class="app-image" :src="item.icon" :alt="item.name + ' icon'" />
        </div>
        <div class="right">
            <a class="name">
                {{ item.name }}
            </a>
            <div class="info">
                <svg style="margin-top: -0.5%;" xmlns="http://www.w3.org/2000/svg" width="10" height="11" viewBox="0 0 10 11" fill="none">
                    <g clip-path="url(#clip0_10262_280)">
                        <path
                            d="M4.80208 1.45625C4.82034 1.41936 4.84855 1.3883 4.88352 1.36659C4.91849 1.34488 4.95883 1.33337 5 1.33337C5.04116 1.33337 5.0815 1.34488 5.11648 1.36659C5.15145 1.3883 5.17965 1.41936 5.19791 1.45625L6.16041 3.40583C6.22382 3.53415 6.31742 3.64517 6.43317 3.72935C6.54893 3.81354 6.68338 3.86838 6.825 3.88916L8.9775 4.20416C9.01828 4.21007 9.0566 4.22728 9.08812 4.25383C9.11964 4.28038 9.14309 4.31522 9.15584 4.35442C9.16858 4.39361 9.17011 4.43558 9.16024 4.47559C9.15037 4.51561 9.12951 4.55206 9.1 4.58083L7.54333 6.09666C7.44067 6.19671 7.36386 6.3202 7.31951 6.45651C7.27516 6.59282 7.26461 6.73787 7.28875 6.87916L7.65625 9.02083C7.66345 9.0616 7.65904 9.10356 7.64354 9.14195C7.62803 9.18033 7.60205 9.21358 7.56856 9.23791C7.53506 9.26224 7.49541 9.27666 7.45411 9.27954C7.41281 9.28241 7.37154 9.27362 7.335 9.25416L5.41083 8.2425C5.28405 8.17592 5.14299 8.14114 4.99979 8.14114C4.85659 8.14114 4.71553 8.17592 4.58875 8.2425L2.665 9.25416C2.62847 9.2735 2.58725 9.2822 2.54602 9.27927C2.50479 9.27634 2.46521 9.2619 2.43179 9.23759C2.39836 9.21328 2.37243 9.18007 2.35694 9.14176C2.34145 9.10344 2.33702 9.06154 2.34416 9.02083L2.71125 6.87958C2.7355 6.73822 2.72499 6.59308 2.68064 6.45668C2.63629 6.32029 2.55942 6.19673 2.45666 6.09666L0.899997 4.58125C0.870245 4.55251 0.849161 4.51599 0.839148 4.47586C0.829135 4.43573 0.830596 4.39359 0.843363 4.35424C0.856131 4.3149 0.879692 4.27993 0.911362 4.25332C0.943033 4.22672 0.98154 4.20954 1.0225 4.20375L3.17458 3.88916C3.31635 3.86854 3.45099 3.81377 3.56691 3.72957C3.68282 3.64538 3.77654 3.53428 3.84 3.40583L4.80208 1.45625Z"
                            :fill="item.star == 0 ? '#9DA2AD' : '#FF6900'" :stroke="item.star == 0 ? '#9DA2AD' : '#FF6900'" stroke-width="1.5" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </g>
                    <defs>
                        <clipPath id="clip0_10262_280">
                            <rect width="10" height="10" fill="white" transform="translate(0 0.5)" />
                        </clipPath>
                    </defs>
                </svg>
                <span v-if="item.star != 0" class="rank">{{ item.star }}</span>
                <span class="type">{{ item.type }}</span>
            </div>
        </div>
    </a>
</template>
<script setup>
const props = defineProps({
    item: {
        type: Object,
        required: true
    },
    index: Number
})

</script>
<style scoped lang="less">
.right a.name:hover {
  color: #775CE1 !important;
  transition: color 0.3s ease;
}
.content {
    width:100%;
    display: flex;
    border-radius: 8px;
    background: #FFF;
    padding: 12px;
    cursor: pointer;
    .left {
        color: var(--Brand, #775CE1);
        opacity: 0.2;
        font-family: Roboto, serif;
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: 64px;
        /* 80% */
    }

    .middle {
        flex-shrink: 0;
        /* 防止图片容器缩小 */
        width: 64px;
        /* 固定宽度 */
        height: 64px;
        /* 固定高度 */

        .app-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 12px;
            /* 保持图片比例 */
        }
    }

    .right {
        margin-left: 12px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        flex: 1 0 0;

        .name {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: var(--Text-Title, #3E4351);
            font-family: Roboto;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 20px;
            /* 142.857% */
        }

        .info {
            display: flex;
            align-items: center;
            /* 垂直居中对齐 */
            gap: 4px;

            /* 添加间距 */
            .rank {
                color: var(--Orange-500, #FF6900);
                font-family: Roboto;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                line-height: 12px;
                /* 100% */
            }

            .type {
                color: var(--Text-Placeholder, #9DA2AD);
                font-family: Roboto;
                font-size: 12px;
                font-style: normal;
                font-weight: 400;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                line-height: 12px;
                /* 100% */
                margin-left: 12px;
            }
        }
    }
}
</style>